<template>
  <v-dialog v-model="dialog" persistent max-width="600px">
    <v-card>
      <v-form ref="form" v-model="valid" lazy-validation>
        <v-card-title>
          <span class="headline">数据异常反馈</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-textarea
                  clearable
                  clear-icon="mdi-close"
                  no-resize
                  label="反馈内容*"
                  :loading="loading"
                  :rules="rules"
                ></v-textarea>
              </v-col>
            </v-row>
          </v-container>
          <small>*为必填项</small>
        </v-card-text>
        <v-card-actions>
          <v-btn color="blue darken-1" text @click="closeDialog">关闭</v-btn>
          <v-btn color="blue darken-1" text @click="submit">提交</v-btn>
        </v-card-actions>
        <v-snackbar v-model="snackbar.show" dark top timeout="3000" :color="snackbar.color">
          <v-icon class="mr-2">{{ snackbar.icon }}</v-icon>
          {{ snackbar.msg }}
          <template v-slot:action="{ attrs }">
            <v-btn icon v-bind="attrs" @click="snackbar.show = false">
              <v-icon>mdi-close</v-icon>
            </v-btn>
          </template>
        </v-snackbar>
      </v-form>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  name: "FeedBack",
  props: ["dialog"],
  data() {
    return {
      valid: true,
      loading: false,
      snackbar: {
        show: false,
        color: "success",
        icon: "mdi-check-circle",
        msg: "上传成功",
      },
      rules: [(value) => !!value || "请输入反馈内容"],
    };
  },
  methods: {
    closeDialog() {
      this.$refs.form.reset();
      this.$emit("closeDialog", 2);
    },
    submit() {
      this.$refs.form.validate();
    },
  },
};
</script>